<article class="component active" id="pulltorefresh">
  <h2 class="component-title">Pull to refresh</h2>
  <p class="component-description">Pull to refresh is a special component that can be used to initiate the refreshing of a page’s contents.</p>
  <h3 class="component-title">demo</h3>
<p class="component-description">HTML:</p>

  <div class="component-example component-example-fullbleed">
      <header class="bar bar-nav">
          <h1 class='title'>Pull to refresh</h1>
      </header>
      <div class="content pull-to-refresh-content" data-ptr-distance="55">
          <div class="pull-to-refresh-layer">
              <div class="preloader"></div>
              <div class="pull-to-refresh-arrow"></div>
          </div>
          <div class="card">
              <div class="card-header">card</div>
              <div class="card-content">
                  <div class="card-content-inner">
                      Hello there! I am a card;
                  </div>
              </div>
          </div>
      </div>
  </div>

{% highlight html %}
<header class="bar bar-nav">
  <h1 class='title'>Pull to refresh</h1>
</header>
<div class="content pull-to-refresh-content" data-ptr-distance="55">
  <div class="pull-to-refresh-layer">
    <div class="preloader"></div>
    <div class="pull-to-refresh-arrow"></div>
  </div>
  <div class="card">
    <div class="card-header">card</div>
    <div class="card-content">
      <div class="card-content-inner">
        Hello there! I am a card;
      </div>
    </div>
  </div>
</div>
{% endhighlight %}

<script type="text/javascript">
$(document).on('refresh', '.pull-to-refresh-content',function(e) {
    setTimeout(function() {
        var cardHTML = '<div class="card">' +
                          '<div class="card-header">New Card</div>' +
                          '<div class="card-content">' +
                            '<div class="card-content-inner">' +
                                'Hello! I am the new card!'+(Math.random()*1000000)+
                            '</div>' +
                          '</div>' +
                      '</div>';

        $(e.target).find('.card').replaceWith(cardHTML);
        // done!
        $.pullToRefreshDone('.pull-to-refresh-content');
    }, 2000);
});
</script>
<p class="component-description">javascript:</p>
{% highlight js %}
$(document).on('refresh', '.pull-to-refresh-content',function(e) {
    setTimeout(function() {
        var cardHTML = '<div class="card">' +
                          '<div class="card-header">New Card</div>' +
                          '<div class="card-content">' +
                            '<div class="card-content-inner">' +
                                'Hello! I am the new card!'+(Math.random()*1000000)+
                            '</div>' +
                          '</div>' +
                      '</div>';

        $(e.target).find('.card').replaceWith(cardHTML);
        // done
        $.pullToRefreshDone('.pull-to-refresh-content');
    }, 2000);
});
{% endhighlight %}
<p class="component-description">Where</p>
<ul>
  <li><code>page-content</code> should have additional <code>pull-to-refresh-content</code> class. This is required to enable pull to refresh</li>
  <li><code>pull-to-refresh-layer</code> hidden layer with pull to refresh visual elements: preloader and arrow. </li>
  <li><code>data-ptr-distance="55"</code> additional attribute that allows to set custom pull to refresh trigger distance. By default (if not specified) it is 44px.</li>
</ul>
<h3 class="component-title">Pull To Refresh Sequence</h3>
<p>When user starts to pull <b>pull-to-refresh-content</b> down, then <b>pull-to-refresh-layer</b> will receive additional "<b>pull-down</b>" class.</p>
<p>When user pulls down <b>pull-to-refresh-content</b> on a distance more than 44px (when <b>pull-to-refresh-layer</b> will be fully visible), then <b>pull-to-refresh-layer</b> will receive additional "<b>pull-up</b>" class which changes arrow rotation to notify user about refresh action on release.</p>
<p>When user release pull to refresh content when it is in "pull-up" state, then <b>pull-to-refresh-layer</b> will receive additional "<b>refreshing</b>" class. In "refreshing" state arrow will be hidden and user will see preloader indicator. On this stage you probably need to do Ajax request and refresh page content.</p>

<h3 class="component-title">Pull To Refresh Events</h3>
<p class="component-description">There is a special JavaScript event that helps us to recognize when we need to refresh content:</p>
<table class="events-table">
  <thead>
    <tr>
      <th>Event</th>
      <th>Target</th>
      <th>Description</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>refresh</td>
      <td>Pull To Refresh content<span>&lt;div class="pull-to-refresh-content"&gt;</span></td>
      <td>Event will be triggered when pull to refresh enters in "refreshing" state</td>
    </tr>
  </tbody>
</table>


<h3 class="component-title">Reset Pull To Refresh</h3>
<p class="component-description">After we refreshed page content, we need to reset pull to refresh component to let user pull it again:</p>
{% highlight html %}
$.pullToRefreshDone(ptrContent)
{% endhighlight %}

<h3 class="component-title">Trigger Pull To Refresh</h3>
<p class="component-description">We can also trigger Pull To Refresh manually by using the following method:</p>
{% highlight html %}
$.pullToRefreshTrigger(ptrContent)

{% endhighlight %}


<h3 class="component-title">Destroy/Disable Pull To Refresh</h3>
<p class="component-description">Sometimes you may need to disable Pull To Refresh on page. We can do that using the following method:</p>
{% highlight html %}
$.destroyPullToRefresh(ptrContent)
{% endhighlight %}

<p class="component-description">And if we need to initialize/enable it again:<p>
{% highlight html %}
$.initPullToRefresh(ptrContent)
{% endhighlight %}

<p>See <code>demos</code> for how to use pull to refresh with tabs.</p>

</article>
